<template>
  <div>
    <!-- 输入框 -->
    <van-field
      v-if="mode == '手机号'"
      class="input_tel"
      v-model="inputValue"
      type="tel"
      placeholder="请输入手机号"
    >
      <span slot="label">
        +86
        <van-icon size="0.3rem" name="arrow-down" />
      </span>
    </van-field>
    <van-field
      v-else-if="mode == '邮箱地址'"
      class="input_tel"
      v-model="inputValue"
      placeholder="请填写邮箱地址"
    ></van-field>
    <!-- 按钮 -->
    <div
      class="next"
      :class="{'next-active' : isSendCode,'next-unactive' : !isSendCode}"
      @click="sendCode"
    >
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script>
import { Icon, Field } from "vant";
import Vue from "vue";

Vue.use(Icon).use(Field);
export default {
  name: "inputGroup",
  props: {
    mode: ""
  },
  data() {
    return {
      inputValue: ""
    };
  },
  computed: {
    isSendCode(newValue, oldValue) {
      if (this.mode == "手机号" && /^1[345678]\d{9}$/.test(this.inputValue)) {
        return true;
      } else if (
        this.mode == "邮箱地址" &&
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(
          this.inputValue
        )
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {
    mode(newValue, oldValue) {
      //   console.log("输入框的模式为：" + newValue);
      this.inputValue = "";
    }
  },
  methods: {
    sendCode() {
      if (this.isSendCode) {
        console.log("点击成功");
        this.$router.push({
          name: "verifyCode",
          params: { value: this.inputValue }
        });
      }
    }
  }
};
</script>

<style scoped>
.input_tel {
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
  height: 1.3rem;
}
.input_tel:after {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  top: 1.2rem;
  height: 1px;
  border-bottom: 1px solid #f0f0f0;
}
.input_tel .van-icon {
  margin-left: 0.1rem;
  padding-right: 0.45rem;
  border-right: 1px solid #c7c7c8;
}
.next-active {
  background-color: #dfa266;
}
.next-unactive {
  background-color: #eaeaea;
}
.next {
  position: fixed;
  right: 0.45rem;
  top: 11rem;
  color: #fff;
  width: 2rem;
  height: 1.3rem;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.next .van-icon {
  line-height: 1.3rem;
  font-size: 18px;
}
</style>